<template>
    <view>
        <!-- 导航栏 -->
        <myNavigation ref="navBar"></myNavigation>
        <view class="contains">
            <!-- 用户信息头部 -->
            <view class="info_head">
                <view class="info_name_photo">
                    <view class="info_name">{{myPageInfo.userInfo.userName}}</view>
                    <view class="info_photo">
                        <image :src="myPageInfo.userInfo.photoUrl" mode="aspectFill" />
                    </view>
                </view>
                <view class="info_date">
                    <view class="info_join_date">{{myPageInfo.userInfo.createdAt}}&nbsp;加入</view>
                    <view class="info_address">IP属地：江西</view>
                </view>
            </view>
            <!-- 用户关注粉丝和设置 -->
            <view class="info_follow_set">
                <view class="info_follow">
                    <!-- 关注 -->
                    <view class="follwing" @tap="toFollowInfoPage" data-type="getFollowed">
                        <view class="follow_num">{{myPageInfo.followedNum}}</view>
                        <view class="follow_title">关注</view>
                    </view>
                    <!-- 粉丝 -->
                    <view class="follwed" @tap="toFollowInfoPage" data-type="getFollower">
                        <view class="follow_num">{{myPageInfo.followerNum}}
                        </view>
                        <view class="follow_title">粉丝</view>
                    </view>
                </view>
                <view class="info_set">
                    <view class="share">分享</view>
                    <view class="follow" :class="{active: myPageInfo.isFollow}" @tap="follow"
                        v-if="(+curUserId)!==myPageInfo.userInfo.userId">
                        {{ myPageInfo.isFollow ? "已关注" : " 关注" }}
                    </view>
                </view>
            </view>

            <!-- 标签页，用户菜单和作品列表 -->
            <view class="tabs">
                <view class="tab_head" :class="{ hidden: !isHeaderVisible }">

                    <block v-for=" (item, index)  in   tabList " :key="index">
                        <!--  -->
                        <view class="tab_head_item" :class="{ active: current_tab === index }" :data-value="index"
                            @tap="handleClick">
                            <text>{{ item.title }}&nbsp;{{item.num}}</text>
                        </view>
                    </block>
                </view>
                <!-- 菜谱 -->
                <view v-if="current_tab === 0" class="tab_body">
                    <scroll-view :scroll-y="true" class="scroll_box" @scroll="handleScroll">
                        <view class="tab_menu_item">
                            <!--  -->
                            <block v-for="(item, index) in  myPageInfo.recipeList " :key="index">
                                <view class="menu_item" @tap="toMenuInfoPage(item)">
                                    <view class="menu_img">
                                        <!--   -->
                                        <image :src="item.imageUrl" mode="aspectFill" />
                                    </view>
                                    <view class="menu_info">
                                        <view class="menu_title_data">
                                            <view class="title">{{item.title}}</view>
                                            <view class="menu_data">
                                                <view class="collection">{{item.favoriteNum}}&nbsp;收藏</view>
                                                <view class="watching">{{item.viewNumber}}&nbsp;浏览</view>
                                                <view class="opusNum">{{item.opusNum}}&nbsp;人做过</view>
                                            </view>
                                        </view>

                                        <view class="author_info">
                                            <view class="author_photo">
                                                <image :src="myPageInfo.userInfo.photoUrl" mode="aspectFill" />
                                            </view>
                                            <view class="author_name">{{myPageInfo.userInfo.userName}}</view>
                                        </view>
                                    </view>
                                </view>
                            </block>
                        </view>
                    </scroll-view>
                </view>

                <!-- 作品 -->
                <view v-if="current_tab === 1" class="tab_body">
                    <scroll-view :scroll-y="true" class="scroll_box" @scroll="handleScroll">
                        <view class="tab_opus_item">
                            <!--   -->
                            <block v-for="(item, index) in  myPageInfo.opusList " :key="index">
                                <view class="opus_item" @tap="toOpusInfoPage(item)">
                                    <view class="opus_img">

                                        <image :src=item.images[0] mode="aspectFill" />
                                    </view>
                                    <view class="cover iconfont">&#xe6c8;&nbsp;{{item.likes}}</view>
                                </view>
                            </block>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>

    </view>
</template>

<script setup>
    import { ref, onMounted, inject } from 'vue';
    import "./userInfo.scss";
    import Taro, { useRouter } from "@tarojs/taro";
    import myNavigation from "../../../components/myNavigation.vue";

    // 注入配置
    const config = inject('config');
    const baseUrl = config.baseUrl; // 从全局配置中读取 baseUrl


    const myPageInfo = ref({
        userInfo: {
            userName: "",
            photoUrl: "",
            createdAt: "",
        },
        isFollow: "",
        followerNum: "",
        followedNum: "",
        menuNum: "",
        opusNum: "",
        recipeList: [
            {
                recipeId: "",
                title: "",
                imageUrl: "",
                favoriteNum: "",
                viewNumber: "",
                opusNum: ""
            }
        ],
        opusList: [
            {
                opusId: "",
                images: "",
                likes: "",
            }],


    })

    // 设置标签页
    // 隐藏和显示标签页头部(上滑下滑控制)
    const isHeaderVisible = ref(true);
    const lastScrollTop = ref(0);
    const headerHeight = ref(100);
    const handleScroll = (e) => {
        const currentScrollTop = e.detail.scrollTop;
        if (currentScrollTop > lastScrollTop.value) {
            // 向下滚动
            isHeaderVisible.value = false;
        } else {
            // 向上滚动
            isHeaderVisible.value = true;
        }
        lastScrollTop.value = currentScrollTop <= 0 ? 0 : currentScrollTop;
    }
    const current_tab = ref(1);
    const tabList = ref([
        { title: '菜谱', num: "0" },
        { title: "作品", num: "0" },

    ]);
    function handleClick(e) {
        current_tab.value = e.currentTarget.dataset.value;
    }



    // 导航栏信息
    const navBar = ref(null);
    const navigationHome = () => {
        Taro.switchTab({
            url: '../../../pages/index/index',
        });
    };
    const setNavBar = () => {
        if (navBar.value) {
            navBar.value.navigationHome = navigationHome;
            navBar.value.navigationTitle = myPageInfo.value.userInfo.userName;
        }
    }



    // 关注作者点击事件
    const follow = () => {
        // 取消关注
        if (myPageInfo.value.isFollow) {
            Taro.request({
                url: `${baseUrl}/follow/removeFollow?followerId=${curUserId}&followedId=${userId}`,
                method: 'DELETE',
            })

        } else {
            // 
            Taro.request({
                url: `${baseUrl}/follow/addFollow?followerId=${curUserId}&followedId=${userId}`,
                method: 'POST',
            })
        }
        myPageInfo.value.isFollow = !myPageInfo.value.isFollow;
    }

    // 跳转到关注用户/粉丝详细页面
    const toFollowInfoPage = (e) => {
        Taro.navigateTo({
            url: `../followerInfo/followerInfo?userId=${userId}
            &curUserId=${curUserId}&type=${e.currentTarget.dataset.type}&userName=${myPageInfo.value.userInfo.userName}`
        });
    }


    // 跳转单个作品详细页面
    const toOpusInfoPage = (item) => {
        Taro.navigateTo({
            url: `../opusInfo/opusInfo?opusId=${item.opusId}&userId=${myPageInfo.value.userInfo.userId}&recipeId=${item.recipeId}&curUserId=${curUserId}`
        });
    }



    // 跳转到菜谱详细页面
    const toMenuInfoPage = (item) => {
        Taro.navigateTo({
            url: `../menuInfo/menuInfo?recipeId=${item.recipeId}&userId=${curUserId}`
        });
    }






    const getUserPageInfo = () => {
        Taro.request({
            url: `${baseUrl}/user/getUserPageInfo?userId=${userId}&curUserId=${curUserId}`,
            success: (res) => {
                myPageInfo.value = res.data.data;
                tabList.value[0].num = myPageInfo.value.menuNum;
                tabList.value[1].num = myPageInfo.value.opusNum;
                myPageInfo.value.opusList.forEach(item => {
                    item.images = JSON.parse(item.images);
                });
                setNavBar();

            }
        });
    }

    // 获取外来搜索值(未完成)
    const router = useRouter();
    // 根据id来查询菜谱信息
    const { userId, curUserId } = router.params;




    onMounted(() => {
        getUserPageInfo();



    });
</script>

<style lang="scss" scoped></style>